import QtQuick 1.1

import Qt.labs.components.native 1.0

import "DesktopComponents" 1.0
import "EvidencehuntCore" 1.0

Rectangle {

    id: field
    anchors.fill: parent

    Image { source: "EvidencehuntCore/pics/crimescene.jpg"; anchors.fill: parent; }

    Dialog {
        id: exitDialog
        title:Label { color:"orange"; text:qsTr("__EXIT__") + emptyString }
        content: Text {
            color:"white";
            width: parent.width-40
            anchors.top: parent.top;
            anchors.topMargin: 20
            anchors.left: parent.left
            anchors.leftMargin: 20;
            font.pixelSize: 16;
            wrapMode: Text.WordWrap
            text:qsTr("__EXITQUESTION__") + emptyString;
        }
        buttons: Row {
            spacing: 20
            height: 65
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter;
            Button { id: bOk; anchors.bottom: parent.bottom; anchors.bottomMargin: 20; text: "OK"; onClicked: Qt.quit(); }
            Button { id: bCancel; anchors.bottom: parent.bottom; anchors.bottomMargin: 20; text:qsTr("__CANCEL__") + emptyString; onClicked: exitDialog.close()}
        }
    }

    Dialog {
        id: resetDialog
        title:Label { color:"orange"; text:qsTr("__RESET__") + emptyString }
        content:Text {
            color:"white";
            width: parent.width-40
            anchors.top: parent.top;
            anchors.topMargin: 20
            anchors.left: parent.left
            anchors.leftMargin: 20;
            font.pixelSize: 16;
            wrapMode: Text.WordWrap
            text: qsTr("__RESETQUESTION__") + emptyString;
        }
        buttons: Row {
            spacing: 20
            height: 65
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter;
            Button {id: bRestartOk; anchors.bottom: parent.bottom; anchors.bottomMargin: 20; text: "OK"; onClicked: { resetDialog.close(); reset(); } }
            Button {id: bRestartCancel; anchors.bottom: parent.bottom; anchors.bottomMargin: 20; text: qsTr("__CANCEL__") + emptyString; onClicked: resetDialog.close(); }
        }
    }

    Dialog {
        id: welcomeDialog
        title: Label { color: "orange"; text: qsTr("__ABOUTWELCOME__") + emptyString; }
        content: Text {
            color:"white";
            width: parent.width-40
            anchors.left: parent.left
            anchors.leftMargin: 20;
            font.pixelSize: 14;
            wrapMode: Text.WordWrap
            text: qsTr("__ABOUTWELCOMETEXT__") + emptyString;
        }
        buttons: Column {
            width: parent.width-40
            height: 90
            Row {
                anchors.horizontalCenter: parent.horizontalCenter;
                Button { text: qsTr("__LANGUAGE__") + emptyString; onClicked: { languageDialog.returnToWelcome = true; welcomeDialog.close(); languageDialog.open(); } }
                Button { text: qsTr("__CONTINUE__") + emptyString; onClicked: { welcomeDialog.close(); welcomeSheet.open(); } }
            }
            Button {anchors.horizontalCenter: parent.horizontalCenter; text: qsTr("__CLOSE__") + emptyString; onClicked: { welcomeDialog.close(); } }
        }
    }

    Sheet {
        id: scoreboardSheet
        title: qsTr("__TOPLIST__") + emptyString
        content: Scoreboard {
            id: scoreboardSheetContents
            anchors.fill: parent
        }
    }

    Sheet {
        id: welcomeSheet
        title: "EvidenceHunt Game - " + qsTr("__ABOUT__") + emptyString
        content: Flickable {
            anchors.fill: parent
            anchors.margins: 30
            contentWidth: welcomeSheetContents.width
            contentHeight: welcomeSheetContents.height
            flickableDirection: Flickable.VerticalFlick
            Welcome {
                id: welcomeSheetContents
            }
        }
    }

    property list<ListModel> languageSelector;

    languageSelector: [

    ListModel {
        id: languageSelector0
        ListElement { name: "English" }
        ListElement { name: "Hungarian" }
        ListElement { name: "Serbian" }
        ListElement { name: "Italian" }
    },

    ListModel {
        id: languageSelector1
        ListElement { name: "Angol" }
        ListElement { name: "Magyar" }
        ListElement { name: "Szerb" }
        ListElement { name: "Olasz" }
    },

    ListModel {
        id: languageSelector2
        ListElement { name: "Engleski" }
        ListElement { name: "Mađarski" }
        ListElement { name: "Srpski" }
        ListElement { name: "Italijanski" }
    },

    ListModel {
        id: languageSelector3
        ListElement { name: "Inglese" }
        ListElement { name: "Ungherese" }
        ListElement { name: "Serbo" }
        ListElement { name: "Italiano" }
    }
    ]

    SelectionDialog {

        property bool returnToWelcome: false;

        id: languageDialog
        titleText: qsTr("__LANGUAGE__") + emptyString
        model: languageSelector[selectedLanguage]
        selectedIndex: selectedLanguage
        onAccepted:  {

            selectLanguage(languageDialog.selectedIndex);

            if (returnToWelcome) {
                returnToWelcome = false;
                welcomeDialog.open();
            } else {
                //settingsDialog.open();
            }

        }
    }

    Dialog {
        id: shareDialog
        title: Label { color:"orange"; text:qsTr("__SHARE__") + emptyString }
        content: Column {
            spacing: 10
                width: parent.width-40
                anchors.top: parent.top
                anchors.topMargin: 20
                anchors.left: parent.left
                anchors.leftMargin: 20

                Text {
                    width:parent.width
                    wrapMode: Text.WordWrap
                    height: 60
                    color:"white"; font.pixelSize: 14;
                    text: qsTr("__SHAREINFO__") + emptyString;
                }

                Rectangle {
                    height: 64
                    color: "transparent"
                    width:parent.width
                    Image { id: shareFacebookIcon; source: "EvidencehuntCore/icons/facebook.png"; }
                    Text {
                        id: shareFacebookText;
                        anchors.left: parent.left;
                        anchors.leftMargin: 64;
                        anchors.top: parent.top;
                        anchors.topMargin: 16;
                        color:"#3B5998";
                        font.pixelSize: 18;
                        font.underline: true;
                        text: qsTr("__OFFICIALFACEBOOK__") + emptyString;
                    }
                    MouseArea {
                        anchors.top: shareFacebookIcon.top
                        anchors.bottom: shareFacebookIcon.bottom
                        anchors.left: shareFacebookIcon.left
                        anchors.right: shareFacebookText.right
                        onClicked: Qt.openUrlExternally("http://www.facebook.com/pages/EvidenceHunt-Game/129432933818266");

                    }
                }

                Rectangle {
                    height: 84
                    color: "transparent"
                    width:parent.width;
                    Image { id: shareTwitterIcon; source: "EvidencehuntCore/icons/twitter.png"; }
                    Text {
                        id: shareTwitterText;
                        anchors.left: parent.left;
                        anchors.leftMargin: 64;
                        anchors.top: parent.top;
                        anchors.topMargin: 16;
                        color:"#4099FF";
                        font.pixelSize: 18;
                        font.underline: true;
                        text: qsTr("__FOLLOWTWITTER__") + emptyString;
                    }
                    MouseArea {
                        anchors.top: shareTwitterIcon.top
                        anchors.bottom: shareTwitterIcon.bottom
                        anchors.left: shareTwitterIcon.left
                        anchors.right: shareTwitterText.right
                        onClicked: Qt.openUrlExternally("http://www.twitter.com/BlackWiCKED/");
                    }
                }

        }
        buttons: Row {
            height: 65
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter;
            Button {id: bShareCancel; anchors.bottom: parent.bottom; anchors.bottomMargin: 20; text: qsTr("__CLOSE__") + emptyString; onClicked: shareDialog.close(); }
        }

    }

    Item {
        id: wrapper
        width: 854
        height: 480
        anchors.centerIn: parent

        Grid {
            id: evidenceTiles
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.top: parent.top
            anchors.topMargin: 20
            columns: 8; spacing: 1
            Repeater {
                id: repeater
                model: tiles
                delegate: Tile {/*ratio: 1.2*/}
            }
        }

        EvidenceInfo {
            id: evidenceInfoInstance
            opacity:  0
            state: isInfoVisible ? 'visible' : ''
            states: State {
                name: "visible"
                PropertyChanges { target: evidenceInfoInstance; opacity: 1 }
            }
            transitions: Transition {
                PropertyAnimation { properties: "opacity"; easing.type: Easing.InOutQuad }
            }
        }

        Button {
            id: onlineScoreboardButton
            text: qsTr("__SUBMITPERSONALBEST__") + emptyString
            anchors.bottom: evidenceInfoInstance.bottom
            anchors.bottomMargin: 20
            anchors.horizontalCenter: evidenceInfoInstance.horizontalCenter
            visible: maxScore > maxScoreSubmitted && !isPlaying && !hasWon && isInfoVisible
            onClicked: {
                openScoreboard();
                scoreboardSheet.open();
            }
        }

        GameMenuTop {
            id: gamemenu
        }

        Rectangle {

            id: expandableMenu

            property bool isExpanded: true;
            color: "transparent"

            anchors.top: parent.top
            anchors.topMargin: 80

            state: "collapsed-landscape" //!isExpanded ? ((field.width < field.height) ? 'collapsed-portrait':'collapsed-landscape') : ((field.width < field.height) ? 'expanded-portrait':'expanded-landscape');

            states: [
            State {
                name: "collapsed-portrait";
                AnchorChanges { target: expandableMenu; anchors.bottom: wrapper.bottom; anchors.left: wrapper.left; anchors.top: undefined; anchors.right: undefined; }
                PropertyChanges { target: expandableMenu; width:wrapper.width; height: (wrapper.height >= 900) ? 390 : (wrapper.height - 510); }
            },
            State {
                name: "collapsed-landscape";
                AnchorChanges { target: expandableMenu; anchors.top: wrapper.top; anchors.right: wrapper.right; anchors.bottom: undefined; anchors.left: undefined;}
                PropertyChanges { target: expandableMenu; width: (wrapper.width >= 900) ? 390 : (wrapper.width - 510); height: wrapper.height;}
            },
            State {
                name: "expanded-portrait";
                AnchorChanges { target: expandableMenu; anchors.bottom: wrapper.bottom; anchors.left: wrapper.left; anchors.top: undefined; anchors.right: undefined; }
                PropertyChanges { target: expandableMenu; width:wrapper.width; height: 390; }
            },
            State {
                name: "expanded-landscape";
                AnchorChanges { target: expandableMenu; anchors.top: wrapper.top; anchors.right: wrapper.right; anchors.bottom: undefined; anchors.left: undefined;}
                PropertyChanges { target: expandableMenu; width: 390; height: wrapper.height;}
            }
        ]

            SuspectList {
                id: suspectlist
            }

            Score {
                id: scoreboard
            }

            GameMenuBottom {
                id: gameMenuBottom
            }
        }
    }

    function openWelcomeDialog() {
        welcomeDialog.open();
    }

    function scoreBoardLoaded() {
        scoreboardSheetContents.hasNoError();
    }

    function openBoardErrorDialog() {
        scoreboardSheetContents.hasError();
    }
}

